<template>
  <div v-resize="onResize">
    <div style="width: 100%; height: 100%" ref="chart"></div>
  </div>
</template>

<script>
import { ChartUtils } from "@/utils/chart";
import AttrSelect from "../utils/AttrSelect.vue";
import { isString } from "@/utils/utils";

const chartUtils = new ChartUtils();

export default {
  components: { AttrSelect },
  data() {
    return {
      key: "trace",
      // step: 1 * 24 * 3600,
      tableData: [],
    };
  },
  props: {
    chartData: Array,
  },
  watch: {
    key: function (v, o) {
      this.resetOpt();
    },
    chartData: function (v, o) {
      this.resetOpt();
    },
  },
  methods: {
    async init() {
      chartUtils.dom = this.$refs.chart;
      chartUtils.init();
      //   await chartUtils.registerMap("Hubei", 420000);
      let option = this.getOption();
      chartUtils.setOption(option);
    },
    filterFunc(k, v) {
      return isString(v);
    },
    getOption() {

      var lngExtent = [30.399815, 30.994042];
      var latExtent = [113.820033, 115.045753];
      var cellCount = [50, 50];
      var cellSizeCoord = [
        (lngExtent[1] - lngExtent[0]) / cellCount[0],
        (latExtent[1] - latExtent[0]) / cellCount[1],
      ];
      let centerCoord = [
          latExtent[0] / 2 + latExtent[1] / 2,
          lngExtent[0] / 2 + lngExtent[1] / 2,
          
      ]
      let data = new Array(100).fill(1).map((v) => {
              let x =
                lngExtent[0] + cellSizeCoord[0] * Math.random() * cellCount[0];
              let y =
                latExtent[0] + cellSizeCoord[1] * Math.random() * cellCount[1];
              return {
                name: "" + Math.random(),
                value: [y, x, Math.random() * 100],
              };
            })
        // console.log(data)
      //   let data = this.reproject();
      //   let data = [
      //     {
      //       name: "仙桃市",
      //       value: 20,
      //     },
      //     {
      //       name: "宜昌市",
      //       value: 10,
      //     },
      //     {
      //       name: "武汉市",
      //       value: 10,
      //     },
      //   ];
      let option = {
        tooltip: {
          trigger: "axis",
        },

        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        calculable: true,

        series: [
          {
            name: "病例轨迹分布",
            type: "scatter",
            coordinateSystem: "bmap",
            data: data,
            encode: {
              value: 2,
            },
            symbolSize: function (val) {
                // console.log(val)
              return val[2] / 5;
            },
            label: {
              formatter: "{b}",
              position: "right",
            },
            itemStyle: {
              color: "#ef3508",
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
        ],
        bmap: {
          center: centerCoord,
          zoom: 11.8,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#999999",
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "rgba(0,0,0,0)",
                },
              },
            ],
          },
        },
      };
      return option;
    },
    reproject() {
      let data = this.chartData.map((v) => v[this.key]);

      data = data.reduce(function (time, name) {
        if (name in time) {
          time[name]++;
        } else {
          time[name] = 1;
        }
        return time;
      }, {});

      let reproject = [];
      // let tableData = [];
      Object.keys(data).forEach((k) => {
        reproject.push({
          label: k === "undefined" ? "未填写" : k,
          value: data[k],
          rr: (data[k] / this.chartData.length).toFixed(4),
        });
      });
      this.tableData = reproject;
      return reproject;
    },

    resetOpt() {
      let option = this.getOption();
      // console.log(option);
      chartUtils.setOption(option);
    },

    onResize() {
      chartUtils.onResize();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>